<template>
	<view class="content">
		<view class="createInput"><input type="text" :value="title" @blur="inputTitle" :placeholder="anonymous?'请输入投票标题':'请输入抽签标题'"></view>
		<view class="createTextarea">
			<view class="">
				<textarea @blur="textareaContent" @input="textareaContent" :placeholder="anonymous?'请输入投票介绍':'请输入抽签介绍'" :value="content"></textarea>
			</view>
			<view class="">
				<u-upload 
				:max-count="3"
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				width="90"
				height="90"
				multiple
				></u-upload>
			</view>
		</view>
		<view class="createCard">
			<view class="createCardTitle">{{anonymous?'投票设置':'抽签设置'}}</view>
			<!-- 抽签设置小卡片 -->
			<view class="createCardContent">
				<!-- 开始时间 -->
				<view class="startTime">
					<view class="">开始时间</view>
					<view class="startTimeRight">
						<view class="" @click="show = true">{{startText}}</view>
						<view class="" @click="show = true">
							<u-icon name="arrow-right" color="#000000" size="24"></u-icon>
						</view>
						<view class="">
							<u-datetime-picker :show="show" closeOnClickOverlay @close="show = false" mode="time"
								v-model='startTime' minHour='0' maxHour="23" minMinute="0" maxMinute="59"
								@change="startChangeTime" @confirm="startConfirmTime" @cancel="startCancelTime">
							</u-datetime-picker>
						</view>
					</view>
				</view>
				<!-- 结束时间 -->
				<view class="endTime">
					<view class="">结束时间</view>
					<view class="endTimeRight">
						<view class="" @click="endShow = true">{{endText}}</view>
						<view class="" @click="endShow = true">
							<u-icon name="arrow-right" color="#000000" size="24"></u-icon>
						</view>
						<view class="">
							<u-datetime-picker :show="endShow" mode="time" closeOnClickOverlay @close="endShow = false"
								v-model='endTime' :minHour='endMinHour' maxHour="23" :minMinute="endMinMinute"
								maxMinute="59" @change="endChangeTime" @confirm="endConfirmTime"
								@cancel="endCancelTime"></u-datetime-picker>
						</view>
					</view>
				</view>
				<!-- 设置每人可参与次数 -->
				<view class="numberOfParticipation">
					<view class="">每人可参与次数</view>
					<view class="">
						<u-number-box v-model="NumberBoxVlue" @change="valChange"></u-number-box>
					</view>
				</view>
				<!-- 设置抽签选项 -->
				<view class="options" id="options">

					<view class="optionOne" v-for=" (item,index) in ProblemOptions" :key="index">
						<u-icon style="margin-right: 5px;" @click="reduce(index)" name="minus-circle-fill" color="#DE868F" size="24"></u-icon>
						<input @blur='inputChange' :value="item.name" :data-item="index" placeholder="请输入选项" type="text"> 
					</view>
					<view class="addOptions" @click="add()">
						<u-icon name="plus-circle-fill" color="#4095E5" size="24"></u-icon>
						<view class="">添加选项（最多可以添加100项）</view>
					</view>
				</view>
				<!-- 抽签结果查看权限 -->
				<view class="viewPermissions">
					<view class="">抽签结果查看权限</view>
					<view class="" style="width: 112px;">
						 <uni-data-select
							  placeholder="请选择"
						      v-model="selectValue"
						      :localdata="range"
						      @change="change"
						    ></uni-data-select>
					</view>
				</view>
				<!-- 匿名 -->
				<view class="anonymous" v-if="anonymous">
					<view class="">匿名投票</view>
					<view class="">
						<u-switch v-model="value1" activeColor="#5ac725" ></u-switch>
					</view>
				</view>
			</view>
		</view>
		<view class="createButton" >
			<button @click="transmission">创建</button>
		</view>
	</view>
</template>

<script>
	import {
		uploadAvatar,
		deleteAvatar
	} from '@/api/system/user.js'
	export default {
		name: "drawAndVote",
		props: {
			anonymous:{
				type:Boolean,
			},
			group:{
				type:String,
			},
			jump:{
				type:String,
			}
		},
		data() {
			return {
				// 图片选择地址
				fileList:[],
				// 单项选择器
				value1:false,
				// 选择器
				selectValue:0,
				range:[{
					value:0,
					text:'发起人可见'
				},{
					value:1,
					text:'参与人可见'
				},{
					value:2,
					text:'所有人可见'
				}],
				title: '',
				content: '',
				show: false,
				endShow: '',
				// labelOptions: 2,
				startTime: '',
				startText: '请选择',
				endTime: '',
				endText: '请选择',
				endMinHour: '',
				endMinMinute: '',
				NumberBoxVlue:'1',
				ProblemOptions:[{
					number:0,
					name:'',
				},{
					number:1,
					name:''
				}],
			};
		},
		watch:{
			group(newvaule,oldvalue){
				if (newvaule) {
					let groupData = JSON.parse(newvaule)
					this.title = groupData.title
					this.content = groupData.conten
					let problemOptions = groupData.group.split(",")
					for(let index=0;index<this.ProblemOptions.length;index++){
						this.ProblemOptions[index].name = problemOptions[index]
						console.log(this.ProblemOptions[index].name)
					}
				}
			},
		},
		methods: {
			// 图片选择
			deletePic(event){
				deleteAvatar(this.fileList[event.index].url).then(res=>{
				})
				this.fileList.splice(event.index,1)
			},
			afterRead(event){
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item)=>{
					this.fileList.push({
						...item,
						status:'uploading',
						message:'上传中'
					})
				})
				for(let i=0;i<lists.length;i++){
					uploadAvatar(lists[i].url).then(res=>{
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen,1,Object.assign(item,{
							status:'success',
							message:'',
							url:res.data[0]
						}))
						fileListLen++
					})
					
				}
			},
			// 介绍和标题
			inputTitle(e){
				this.title = e.detail.value
			},
			textareaContent(e){
				this.content = e.detail.value
			},
			// 问题
			inputChange(e){
				if (e.target.dataset.item<=2) {
					for (var i = 0; i < this.ProblemOptions.length; i++) {
						if (e.target.dataset.item==this.ProblemOptions[i].number) {
							this.ProblemOptions[i].name = e.detail.value
						}
					}
				} else{
					let valueObject={
						number:e.target.dataset.item,
						name:e.detail.value
					}
					if(this.ProblemOptions.indexOf(valueObject) == -1 && e.detail.value){
						this.ProblemOptions.push(valueObject)
					}
				}
				
			},
			// 传值给父组件
			transmission(){
				let imgList = []
				for (let i = 0; i < this.fileList.length; i++) {
					console.log(1)
					imgList.push(this.fileList[i].url)
				}
				
				for (let i = 0; i < this.range.length; i++) {
					if (this.selectValue==this.range[i].value) {
						var selectText = this.range[i].text
						break
					}
				}
				let time = new Date()
				let fullYear = time.getFullYear()
				let month = time.getMonth()+1
				let day = time.getDate()
				console.log("当前几号："+day)
				let valueObject = {
					title:this.title,
					content:this.content,
					startTime:fullYear+"-"+month+"-"+day+" "+this.startTime+":00",
					endTime:fullYear+"-"+month+"-"+day+" "+this.endTime+":00",
					problem:this.ProblemOptions,
					number:this.NumberBoxVlue,
					power:selectText,
					img:imgList
				}
				
				if(this.anonymous){
					Object.assign(valueObject,{
						NotAnonymous:this.value1?"1":"0"
					})
				}
				if (this.title&&this.content) {
					for (var i = 0; i < this.ProblemOptions.length; i++) {
						if (!this.ProblemOptions[i].name) {
							this.$modal.msg("请完善信息")
							break
						} else{
							this.$emit("valueObject",valueObject)
							break
						}
					}
				}else{
					this.$modal.msg("请完善信息")
				}
			},
			// 选择器
			change(e){
			},
			// 时间选择器
			startCancelTime(e) {
				this.show = false
				this.startTime = ''
				this.endMinHour = 0
				this.endMinMinute = 0
				this.startText = '请选择'
			},
			startChangeTime(e) {
				this.startTime = e.value
				this.endMinHour = this.startTime.split(':')[0]
				this.endMinMinute = this.startTime.split(':')[1]
				this.startText = this.startTime
			},
			startConfirmTime(e) {
				this.show = false
				this.startTime = e.value
				this.endMinHour = this.startTime.split(':')[0]
				this.endMinMinute = this.startTime.split(':')[1]
				this.startText = this.startTime
			},
			endChangeTime(e) {
				this.endTime = e.value
				this.endText = this.endTime
			},
			endConfirmTime(e) {
				this.endShow = false
				this.endTime = e.value
				this.endText = this.endTime
			},
			endCancelTime(e) {
				this.endShow = false
				this.startTime = ''
				this.endMinHour = 0
				this.endMinMinute = 0
				this.startText = '请选择'
			},
			// 计数器
			valChange(e) {
			},
			add() {
				this.ProblemOptions.push({
					number:this.ProblemOptions.length,
					name:''
				})
			},
			reduce(e) {
				this.ProblemOptions.splice(e,1)
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		min-height: 100vh;
		padding-top: 15px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 16px;
	}

	.createInput,
	.createTextarea,
	.createCard {
		width: calc(100% - 24px);
	}

	.createCard {
		display: flex;
		flex-direction: column;
	}

	.startTime,
	.endTime,
	.numberOfParticipation,
	.viewPermissions,
	.anonymous{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.startTimeRight,
	.endTimeRight {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	// 输入框
	.createInput input {
		border-radius: 5px;
		border: 1px solid #888888;
		height: 32px;
		padding-left: 10px;
		padding-right: 10px;
	}

	// 多行输入框和图片选择
	.createTextarea {
		margin-top: 8px;
		border: 1px solid #A2EF4D;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		border-radius: 2px;
	}

	// 图片设置卡片
	.createCard {
		margin-top: 10px;
		
	}

	.createCardTitle {
		margin-bottom: 5px;
		font-size: 18px;
	}

	.createCardContent {
		border: 1px solid #11D183;
		border-radius: 2px;
		padding-bottom: 15px
			}

	.optionOne,
	.addOptions {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.startTime,
	.endTime,
	.numberOfParticipation,
	.optionOne,
	.addOptions,
	.viewPermissions,
	.anonymous{
		height: 34px;
		padding: 0 14px;
		box-sizing: border-box;
	}
	
	// 创建按钮
	.createButton {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 30px;
		display: flex;
		flex-direction: column;
	}

	.createButton button {
		width: 219px;
		border-radius: 50px;
		background-color: #A2EF4D
	}
	
</style>
